<template>
<div class="city">
    <b style="margin-right:15px">地区</b>
      <el-select v-model="province"  style="width:130px" placeholder="请选择" @change="getArea(province)">
    <el-option
      v-for="(item, idx) in provinces"
      :key="idx"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
  <el-select
    v-model="city"
    style="margin-left: 40px;width:130px"
    placeholder="请选择">
    <el-option
      v-for="(item, idx) in citys"
      :key="idx"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
</div>
</template>
<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'selectedCity',
  data () {
    return {
      province: '',
      city: '',
      provinces: [],
      citys: []
    }
  },
  created () {
    this.loading()
  },
  methods: {
    // 设置好城市
    loading () {
      this.provinces = provinces()
    },
    // 获取对应城市的地区
    getArea (pname) {
      this.citys = citys(pname)
    }
  }
}

</script>
